import 'package:flutter/material.dart';

class UserPageWidget extends StatefulWidget {
  UserPageWidget({Key key}) : super(key: key);

  @override
  _UserPageWidgetState createState() => _UserPageWidgetState();
}

class _UserPageWidgetState extends State<UserPageWidget> {

  @override
  Widget build(BuildContext context){
    return Scaffold(
        appBar: PreferredSize(
          child: Offstage(
            offstage: true,
            child: AppBar(
              title: Text('个人中心'),
            ),
          ),
          preferredSize: Size.fromHeight(MediaQuery.of(context).size.height),
        ),
        body: ListView(
          children: [
            Container(
              height: 280,
              child: Stack(
                children: [
                  Positioned(
                    left: 0,
                      right: 0,
                      top: 0,
                      height: 200,
                      child: ClipRRect(
                          borderRadius: BorderRadius.only(bottomRight: Radius.circular(20),bottomLeft: Radius.circular(20)),
                          child: Container(
                            color: Colors.red,
                            child: Stack(
                              children: [
                                Positioned(
                                  left: 10,
                                    right: 10,
                                    bottom: 40,
                                    height: 100,
                                    child: Stack(
                                      children: [
                                        Positioned(
                                          left: 10,
                                            top: 20,
                                            height: 60,
                                            child: Row(
                                              children: [
                                                ClipOval(child: Image.asset('images/icon_user_header.png',width: 50,)),
                                                Container(width: 10,),
                                                Text('请登录', style: TextStyle(
                                                  color: Colors.white
                                                ),)
                                          ],
                                        )),
                                        Positioned(
                                          right: 10,
                                            top: 20,
                                            height: 60,
                                            child: Row(
                                              children: [
                                                Icon(Icons.favorite_border,color: Colors.white),
                                                Container(width: 10,),
                                                Icon(Icons.settings,color: Colors.white),
                                              ],
                                            ))
                                      ],
                                    )
                                ),
                              ],
                            ),
                          )
                      )
                  ),
                  Positioned(
                    bottom: 0,
                    left: 10,
                    right: 10,
                    height: 100,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10.0),
                      child: Container(
                          color: Colors.white,
                          child: Flex(
                            direction: Axis.horizontal,
                            children: [
                              Expanded(
                                flex: 1,
                                  child: _buildTopFunctionCell(
                                      imageName: 'images/icon_user_cardBag.png',
                                      title: '卡包管理',
                                      callBack: (){
                                        Navigator.push(context, MaterialPageRoute(builder: (context){
//                                          return NewRoute();
                                        }));
                                      })
                              ),
                              Expanded(
                                  flex: 1,
                                  child: _buildTopFunctionCell(
                                      imageName: 'images/icon_user_book.png',
                                      title: '预约管理',
                                      callBack: (){
                                        print('ddsfdsfd');
                                      })
                              ),
                              Expanded(
                                  flex: 1,
                                  child: _buildTopFunctionCell(
                                      imageName: 'images/icon_user_order.png',
                                      title: '提货单',
                                      callBack: (){
                                        print('ddsfdsfd');
                                      })
                              ),
                              Expanded(
                                  flex: 1,
                                  child: _buildTopFunctionCell(
                                      imageName: 'images/icon_user_comment.png',
                                      title: '待评价',
                                      callBack: (){
                                        print('ddsfdsfd');
                                      })
                              )
                            ],
                          )
                      ),
                    ),
                  )
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              height: 70,
              color: Colors.white,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10.0),
                child:Flex(
                direction: Axis.horizontal,
                children: [
                  Expanded(
                    flex:1,
                    child: Container(
                      child: Stack(
                        children: [
                          Align(
                            alignment: FractionalOffset(0.35,0.5),
                            child: Image.asset('images/icon_user_question.png',width: 24,height: 24,),
                          ),
                          Align(
                            alignment: FractionalOffset(0.65,0.5),
                            child: Text('问答管理'),
                          ),
                          Positioned(
                            top: 15,
                              bottom: 15,
                              right: 0,
                              width: 0.5,
                              child: Container(color: Colors.black12,))
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    flex:1,
                    child: Container(
                      child: Stack(
                        children: [
                          Align(
                            alignment: FractionalOffset(0.35,0.5),
                            child: Image.asset('images/icon_user_strategy.png',width: 24,height: 24,),

                          ),
                          Align(
                            alignment: FractionalOffset(0.65,0.5),
                            child: Text('攻略管理'),
                          ),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            )
            ),
            Container(
              margin: EdgeInsets.only(left: 10,right: 10),
              height: 101,
              color: Colors.white,
              child: Column(
                children: [
                  Container(
                    height: 50,
                    child: Stack(
                      children: [
                        Positioned(
                          left:10,
                            top: 15,
                            height: 20,
                            child: Text('关于我们')
                        ),
                        Positioned(
                            right:10,
                            top: 15,
                            height: 20,
                            child: Icon(Icons.keyboard_arrow_right)
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 10,right: 10),
                    height: 0.5,
                    color: Colors.black12,
                  ),
                  Container(
                    height: 50,
                    child: Stack(
                      children: [
                        Positioned(
                            left:10,
                            top: 15,
                            height: 20,
                            child: Text('联系客服')
                        ),
                        Positioned(
                            right:10,
                            top: 15,
                            height: 20,
                            child: Icon(Icons.keyboard_arrow_right)
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        )
    );
  }
  
  Widget _buildTopFunctionCell({String imageName, String title, Function callBack}){
    var tmpTitle = '';
    if(title != null){
      tmpTitle = title;
    }
    return GestureDetector(
      child: Container(
        child: Column(
          children: [
            Container(height: 25,),
            Image.asset(imageName,width: 30,height: 30,),
            Text(tmpTitle),
          ],
        )
      ),
      onTap: (){
        if(callBack != null){
          callBack();
        }
      },
    );
  }
}